<template>
    <div class="mainDiv" style="color:#000">
        <div class="rowHead">
            <span class="spanHead">当期跨店消费详细</span>
            <el-date-picker class="w300" v-model="times" type="daterange" align="right" placeholder="选择日期范围（默认当天日期）" @change="getCrossShopList" :picker-options="timeArea">
            </el-date-picker>
        </div>
        <el-tabs tab-position="left" type="border-card" style="height: 100%">
            <el-tab-pane>
                <span slot="label"><i class="el-icon-date"></i> 其他店客户在本店消费详情</span>
                <el-tabs type="border-card">
                    <el-tab-pane label="合计信息">
                        <el-table :data="shopInfoList" height="100%">
                            <el-table-column prop="shopName" label="店名" width="180">
                            </el-table-column>
                            <el-table-column prop="czMoney" label="充值金额" width="180">
                            </el-table-column>
                            <el-table-column prop="receMoney" label="现金消费（含充值）" width="180">
                            </el-table-column>
                            <el-table-column prop="cardReduce" label="卡耗消费">
                            </el-table-column>
                            <el-table-column prop="useBalance" label="余额消费">
                            </el-table-column>
                            <el-table-column prop="useGiftBalance" label="赠送余额消费">
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="单据明细">
                        <div class="mainDiv">
                            <div>
                                <el-select v-model="oFilter.shopId" @change="getOtherShopGuestOrder">
                                    <el-option label="请选择分店" :value="0"></el-option>
                                    <el-option v-for="(item,index) in shopList" :label="item.name" :value="item.id" :key="index"></el-option>
                                </el-select>
                                <el-select v-model="oFilter.orderType" @change="getOtherShopGuestOrder">
                                    <el-option label="请选择订单类型" :value="0"></el-option>
                                    <el-option label="开卡" :value="1"></el-option>
                                    <el-option label="开单" :value="2"></el-option>
                                    <el-option label="充值" :value="3"></el-option>
                                </el-select>
                            </div>
                            <el-table :data="shopOrderList" height="100%">
                                <el-table-column prop="name" label="客户">
                                </el-table-column>
                                <el-table-column prop="shopname" label="所在店">
                                </el-table-column>
                                <el-table-column prop="order_sn" label="消费单号" width="170">
                                </el-table-column>
                                <el-table-column prop="ordertype" label="单据类型">
                                    <template slot-scope="scope">
                                        <Tags :typeValue="scope.row.ordertype" typeName="orderType"></Tags>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="recemoney" label="充值金额">
                                    <template slot-scope="scope" v-if="3 == scope.row.ordertype">
                                        {{scope.row.recemoney}}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="receMoney" label="现金消费（含充值）" width="90">
                                    <template slot-scope="scope">
                                        {{scope.row.recemoney}}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="cardreduce" label="卡耗消费">
                                </el-table-column>
                                <el-table-column prop="usebalance" label="余额消费">
                                </el-table-column>
                                <el-table-column prop="usegiftbalance" label="赠送余额消费">
                                </el-table-column>
                                <el-table-column prop="addtime" label="下单时间" width="100">
                                    <template slot-scope="scope">
                                        {{scope.row.addtime|dateTime}}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="status" label="单据状态">
                                    <template slot-scope="scope">
                                        <Tags :typeValue="scope.row.status" typeName="orderStatus" :tagStyle="{color: '#fff'}"></Tags>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination layout="prev, pager, next" :page-size="oFilter.limit" @current-change="currpage" :total="oFilter.total"></el-pagination>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-tab-pane>
            <el-tab-pane>
                <span slot="label"><i class="el-icon-date"></i> 本店客户到其他店消费详情</span>
                <el-tabs type="border-card">
                    <el-tab-pane label="合计信息">
                        <el-table :data="guestInfoList" height="100%">
                            <el-table-column prop="shopName" label="店名" width="180">
                            </el-table-column>
                            <el-table-column prop="czMoney" label="充值金额" width="180">
                            </el-table-column>
                            <el-table-column prop="receMoney" label="现金消费（含充值）" width="180">
                            </el-table-column>
                            <el-table-column prop="cardReduce" label="卡耗消费">
                            </el-table-column>
                            <el-table-column prop="useBalance" label="余额消费">
                            </el-table-column>
                            <el-table-column prop="useGiftBalance" label="赠送余额消费">
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="单据明细">
                        <div class="mainDiv">
                            <div>
                                <el-select v-model="tFilter.shopId" @change="getGuestOrderInOtherShop">
                                    <el-option label="请选择分店" :value="0"></el-option>
                                    <el-option v-for="(item,index) in shopList" :label="item.name" :value="item.id" :key="index"></el-option>
                                </el-select>
                                <el-select v-model="tFilter.orderType" @change="getGuestOrderInOtherShop">
                                    <el-option label="请选择订单类型" :value="0"></el-option>
                                    <el-option label="开卡" :value="1"></el-option>
                                    <el-option label="开单" :value="2"></el-option>
                                    <el-option label="充值" :value="3"></el-option>
                                </el-select>
                            </div>
                            <el-table :data="guestOrderList" height="100%">
                                <el-table-column prop="name" label="客户">
                                </el-table-column>
                                <el-table-column prop="shopname" label="所在店">
                                </el-table-column>
                                <el-table-column prop="order_sn" label="消费单号" width="170">
                                </el-table-column>
                                <el-table-column prop="ordertype" label="单据类型">
                                    <template slot-scope="scope">
                                        <Tags :typeValue="scope.row.ordertype" typeName="orderType"></Tags>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="recemoney" label="充值金额">
                                    <template slot-scope="scope" v-if="3 == scope.row.ordertype">
                                        {{scope.row.recemoney}}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="receMoney" label="现金消费（含充值）" width="90">
                                    <template slot-scope="scope">
                                        {{scope.row.recemoney}}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="cardreduce" label="卡耗消费">
                                </el-table-column>
                                <el-table-column prop="usebalance" label="余额消费">
                                </el-table-column>
                                <el-table-column prop="usegiftbalance" label="赠送余额消费">
                                </el-table-column>
                                <el-table-column prop="addtime" label="下单时间" width="100">
                                    <template slot-scope="scope">
                                        {{scope.row.addtime|dateTime}}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="status" label="单据状态">
                                    <template slot-scope="scope">
                                        <Tags :typeValue="scope.row.status" typeName="orderStatus" :tagStyle="{color: '#fff'}"></Tags>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination layout="prev, pager, next" :page-size="tFilter.limit" @current-change="tCurrpage" :total="tFilter.total"></el-pagination>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import CrossShop from '@/service/shop/crossShop.js'
import Tags from '@/components/orderTags.vue'

export default {
  name: 'featList',
  data () {
    return {
      timeArea: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const td = new Date()
            td.setHours(0)
            td.setMinutes(0)
            td.setSeconds(0)
            td.setMilliseconds(0)
            const start = new Date()
            start.setTime(td.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, td])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const td = new Date()
            td.setHours(0)
            td.setMinutes(0)
            td.setSeconds(0)
            td.setMilliseconds(0)
            const start = new Date()
            start.setTime(td.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, td])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const td = new Date()
            td.setHours(0)
            td.setMinutes(0)
            td.setSeconds(0)
            td.setMilliseconds(0)
            const start = new Date()
            start.setTime(td.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, td])
          }
        }]
      },
      shopInfoList: [],
      guestInfoList: [],
      shopOrderList: [],
      guestOrderList: [],
      oFilter: {
        page: 1,
        limit: 15,
        times: [new Date(), new Date()],
        shopId: 0,
        orderType: 0,
        total: 0
      },
      tFilter: {
        page: 1,
        limit: 15,
        times: [new Date(), new Date()],
        shopId: 0,
        orderType: 0,
        total: 0
      },
      times: [new Date(), new Date()],
      shopList: []
    }
  },
  methods: {
    // 获取总数据
    getCrossShopList: async function () {
      // times转义
      this.getOtherShopGuestOrder()
      this.getGuestOrderInOtherShop()
      this.shopInfoList = await CrossShop.getOtherShopGuestOrderInfo(this.changeFilter(this.oFilter))
      this.guestInfoList = await CrossShop.getGuestOrderInOtherShopInfo(this.changeFilter(this.tFilter))
    },
    // 切换分页
    currpage (val) {
      this.oFilter.page = val
      this.getOtherShopGuestOrder()
    },
    tCurrpage (val) {
      this.tFilter.page = val
      this.getGuestOrderInOtherShop()
    },
    // 获取其他店在本店消费信息
    async getOtherShopGuestOrder () {
      let data = await CrossShop.getOtherShopGuestOrder(this.changeFilter(this.oFilter))
      this.shopOrderList = data.data
      this.oFilter.total = data.count
    },
    // 获取本店客户在其他店消费信息
    async getGuestOrderInOtherShop () {
      let data = await CrossShop.getGuestOrderInOtherShop(this.changeFilter(this.tFilter))
      this.guestOrderList = data.data
      this.tFilter.total = data.count
    },
    // 转换filter
    changeFilter (filter) {
      let newFilter = Object.assign({}, filter)
      newFilter.times = JSON.stringify(this.times)
      return newFilter
    },
    // 获取分店列表
    async getOtherShopList () {
      this.shopList = await CrossShop.getOtherShopList()
    }
  },
  mounted: function () {
    this.getCrossShopList()
    this.getOtherShopList()
  },
  components: { Tags }
}
</script>
<style>
.el-tabs--left .el-tabs__content {
    height: 100%;
    box-sizing: border-box;
}

.el-tab-pane {
    height: 100%
}

.el-tabs--top {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.spanHead {
    font-size: 12px;
    font-weight: 900;
    margin-right: 20px;
    color: #fff;
    background-color: #6b89b5;
    border-radius: 3px;
    padding: 8px;
}
</style>